<template>
  <el-select
    clearable
    :class="className"
    :disabled="disabled"
    v-model="storeId"
    :placeholder="placeholder"
    @change="storeChange"
    :size="size"

  >
    <el-option
      v-for="item in stores"
      :key="item.id"
      :value="item.id"
      :label="item.storeName"
    />
  </el-select>
</template>

<script>
// :disabled="disabled ? true : stores.length == 1 ? true : false"
import { mapGetters } from 'vuex'
export default {
  model: {
    props: 'value',
    event: 'input',
  },
  props: {
    value: {
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    //是否默认门店
    defaultStoreId: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '所属门店',
    },
    size: {
      type: String,
      default: 'medium',
    },
    className: {
      type: String
    }
  },
  data () {
    return {
      storeId: '', //门店ID
    }
  },
  computed: {
    ...mapGetters(['entryStore', 'stores', 'storesCalue']),
  },
  watch: {
    storesCalue: function (newValue, oldValue) {
      if (!this.disabled) {
        //为true时，不在监听菜单栏选择
        this.storeId = newValue
        this.$emit('input', newValue)
      }
    },
    value: function (newValue, oldValue) {
      this.renderValue()
    },
    storeId: function (newValue, oldValue) {
      this.$emit('input', newValue)
    },
  },
  methods: {
    storeChange (value) {
      this.$emit('input', value)
    },
    renderValue () {
      this.storeId = this.value
        ? this.formatValue(this.value)
        : this.defaultStoreId
          ? this.entryStore
          : this.stores.length == 1 ? this.storesCalue : this.formatValue(this.value)
    },
    formatValue (value) {
      return value ? Number(value) : ''
    },
  },
  created () {
    // if(Array.isArray(this.stores)&&this.stores.length==1){
    //   this.storeId=this.stores[0].id;
    // }
  },
  mounted () {
    this.renderValue()
    //TODO 如果默认的话，去掉全部选项
  },
}
</script>
